import React, { useState, useCallback } from 'react'

type ChildProps = {
  click: () => void
}

// 对于函数组件来说，状态每次更新后，组件都会被重新渲染
// 所以父组件 App 中 count 发生改变后， Child1 和 Child2 组件都会重新渲染

// 组件每次重新渲染时，组件内部的事件处理程序等函数都会被重新创建
// 导致子组件每次接收到不同的 props，从而造成不必要的渲染，产生性能问题
const Child1 = ({ click }: ChildProps) => {
  console.log('Child1 组件更新')
  return (
    <div style={{ backgroundColor: 'lightsalmon', padding: 5 }}>
      子组件1：<button onClick={click}>点击</button>
    </div>
  )
}

const Child2 = () => {
  console.log('Child2 组件更新')
  return <div style={{ backgroundColor: 'lightgoldenrodyellow', padding: 5 }}>子组件2</div>
}

const App = () => {
  const [count, setCount] = useState(0)

  // 回调函数
  const handleClick = useCallback(() => {
    setCount(count + 10)
  }, [count])

  return (
    <div style={{ backgroundColor: 'lightseagreen', padding: 10 }}>
      <h1>计数器：{count}</h1>
      <button onClick={() => setCount(count + 1)}>+1</button>

      <hr />

      {/* 子组件 */}
      <Child1 click={handleClick} />

      <hr />

      <Child2 />
    </div>
  )
}

export default App
